<template>
    <div>
        <div slot="header" class="clearfix">
            <el-form :inline="true" :model="sel">
                <el-form-item>
                    <el-input v-model="sel.deptName" placeholder="部门名称" :clearable="true"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="deptLocal"><i class="el-icon-search"></i></el-button>
                    <el-button type="success" @click="dialog.addshow = true">新建</el-button>
                </el-form-item>
            </el-form>

        </div>

        <el-table :data="deptList" stripe style="width: auto">
            <el-table-column prop="id" label="ID" width="450px">
            </el-table-column>
            <el-table-column prop="deptName" label="部门名称" width="420px">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.row.id)">编辑</el-button>
                    <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row.id)">
                        <el-button slot="reference" size="mini" type="danger">删除</el-button>
                    </el-popconfirm>

                </template>
            </el-table-column>
        </el-table>





        <el-dialog title="添加部门" :visible.sync="dialog.addshow" width="32%">
            <el-form ref="addForm" :model="addForm" label-width="80px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="部门名称" prop="deptName">
                            <el-input v-model="addForm.deptName"></el-input>
                        </el-form-item>

                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialog.addshow = false">取 消</el-button>
                <el-button type="primary" @click="save()">提 交</el-button>
            </span>
        </el-dialog>


        <el-dialog title="修改部门" :visible.sync="dialog.updateshow" width="32%">
            <el-form ref="updateForm" :model="updateForm" label-width="80px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="部门名称" prop="deptName">
                            <el-input v-model="updateForm.deptName"></el-input>
                        </el-form-item>

                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialog.updateshow = false">取 消</el-button>
                <el-button type="primary" @click="update()">提 交</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            addForm: {},
            updateForm: {},

            deptList: [],
            dialog: {
                addshow: false,
                updateshow: false
            },
            sel: {
                deptName: ""
            }
        };
    },
    methods: {
        deptLocal() {
            this.$axios.post("/depts/selAll",this.sel).then(res => {
                this.deptList = res.data.data.deptList;
                this.sel.deptName=""
            })
        },

        save() {
            this.$axios.post("/depts", this.addForm).then(res => {
                if (res.data.code = 200) {
                    this.dialog.addshow = false;
                    this.$message.success("添加成功~");
                    this.addForm = {};
                    this.deptLocal();
                }
            })
        },
        update() {
            this.$axios.put("/depts", this.updateForm)
                .then(res => {
                    if (res.data.code = 200) {
                        this.dialog.updateshow = false;
                        this.$message.success("修改成功~");
                        this.deptLocal();
                    }

                })
        },
        handleEdit(id) {
            this.dialog.updateshow = true;
            this.$axios.get("/depts/" + id).then(res => {
                this.updateForm = res.data.data.list;
            }).catch(error => {
                this.$message.error("出错了，稍后重试")
            });
        },
        handleDelete(id) {
            this.$axios.delete("/depts/" + id).then(res => {
                if (res.data.code != 200) {
                    this.$message.error(res.data.message);
                    this.deptLocal();
                }else{
                    this.$message.success("删除成功~");
                    this.deptLocal();
                }
            })
        },
    },
    mounted() {
        this.deptLocal();
    },
};
</script>